<template>
  <div id="app">
    <el-dialog :visible.sync="cadDetail" title="CAD解析详情" top="10px" width="80%">
      <div class="parseWrap">
        <div
            class="imgWrap"
            @mousewheel="onWheel"
            @mousedown="onDown"
            @mousemove="onMove"
            @mouseup="onUp"
            ref="imgWraperRef"
        >
          <div class="imgBox" :style="{ scale }">
            <img
                :draggable="false"
                @mousedown="onImgTouch"
                @mousemove="onImgTouch"
                @mouseup="onImgTouch"
                :src="imgSrc"
                ref="imgRef"
                @load="onLoad"

            />
            <div
                :class="['text', curIndex == i && 'active']"
                v-for="(e, i) in texts"
                @click="onItem2(e, i)"
                :style="{
								left: `${e.location.left}px`,
								top: `${e.location.top}px`,
								width: `${e.location.width}px`,
								height: `${e.location.height}px`,
							}"
                :key="i"
            ></div>
          </div>
        </div>
        <div class="textWrap">
          <div class="textList" ref="textRef">
            <div
                @click="onItem(e, i)"
                :class="['textItem', i == textIndex && 'active']"
                v-for="(e, i) in newTexts"
                :key="i"
            >
              <span class="value">{{ e.words }}</span>
<!--              <span class="index">x{{ e.buyCount }}</span>-->
            </div>
          </div>
          <div class="tool">
            <div class="stepper">
              <el-slider
                  v-model="scale"
                  :min="min"
                  :max="max"
                  :step="0.01"
                  :marks="{
									1: '1',
									[min]: `${min}`,
									[max]: `${max}`,
								}"
              ></el-slider>
            </div>
            <el-button
                style="margin-left: 20px"
                type="primary"
                size="mini"
                @click="onLoad"
            >
              自适应
            </el-button>
          </div>
        </div>
      </div>


    </el-dialog>
  </div>
</template>

<script>
let X = 0;
let Y = 0;
let drag = false;
export default {
  name: "cadDetail",
  data() {
    return {
      cadDetail: false,
      form: {},
      texts: [],
      scale: 1,
      imgSrc:"",
      autoScale: 1,
      min: 0.1,
      max: 5,
      cds: [],
      curIndex: -1,
      textIndex: -1,
    }
  },
  computed:{
    newTexts() {
      const map = {};
      this.texts.forEach((e) => {
        if (map[e.words]) map[e.words] += 1;
        else map[e.words] = 1;
      });
      return Object.keys(map).map((words) => ({ words, count: map[words] }));
    },
    total() {
      return this.cds.reduce((a, b) => a + b.count, 0);
    },
  },
  methods: {
    handleOpen(val) {
      this.cadDetail = true
      this.scale = 1;
      this.curIndex = -1;
      this.textIndex = -1;
      this.imgSrc='https://'+val.cadUrl
      this.$api.assignGetCADDetail({assignTaskId: val.assignTaskId}).then(res => {
        this.cds = res?.cds || [];
        this.texts = res?.texts || [];
        // console.log(this.cds, this.texts)
      })
    },
    onDown(e) {
      const {screenX, screenY} = e;
      X = screenX;
      Y = screenY;
      drag = true;
    },
    onMove(e) {
      const {screenX, screenY} = e;
      if (drag) {
        const ref = this.$refs.imgWraperRef;
        if (ref) {
          ref.scrollLeft = ref.scrollLeft - (screenX - X);
          ref.scrollTop = ref.scrollTop - (screenY - Y);
          X = screenX;
          Y = screenY;
        }
      }
    },
    onUp(e) {
      X = 0;
      Y = 0;
      drag = false;
    },
    onWheel(e) {
      const { deltaY } = e;
      const { scale } = this;
      const { sub, div } = this.$quinn.$acc;
      this.scale = sub(scale, div(deltaY, 500));
      e.preventDefault();
      return false;
    },
    onImgTouch(e) {
      e.preventDefault();
      return false;
    },
    onLoad() {
      this.$nextTick(() => {
        const ref = this.$refs.imgWraperRef;
        const imgRef = this.$refs.imgRef;
        if (ref && imgRef) {
          const r1 = ref.offsetWidth / imgRef.offsetWidth;
          const r2 = ref.offsetHeight / imgRef.offsetHeight;
          this.autoScale = parseFloat((r1 < r2 ? r1 : r2).toFixed(2));
          this.scale = this.autoScale;
          ref.scrollLeft = (imgRef.offsetWidth - ref.offsetWidth) * 0.5 + 10;
          ref.scrollTop = (imgRef.offsetHeight - ref.offsetHeight) * 0.5 + 10;
        }
      });
    },
    onItem2(e, i) {
      this.curIndex = i;
      this.textIndex = this.newTexts.findIndex((item) => item.words == e.words);
      const ref = this.$refs.textRef;
      if (ref) {
        ref.scrollTop = 45 * this.textIndex;
      }
    },
    onItem(e, i) {
      this.textIndex = i;
      this.curIndex = this.texts.findIndex((item) => item.words == e.words);
      const { left, top } = this.texts[this.curIndex].location;
      const ref = this.$refs.imgWraperRef;
      if (ref) {
        // console.log(left, top);
        // ref.scrollLeft = left * this.scale;
        // ref.scrollTop = top * this.scale;
      }
    },
    onStep(step = 0.1) {
      const { scale, min, max } = this;
      let res = this.$quinn.$acc.add(scale, step);
      if (res <= min) res = min;
      else if (res >= max) res = max;
      this.scale = res;
    },
  }
}
</script>

<style lang="less" scoped>
.parseWrap {
  height: calc(96vh - 100px);
  display: flex;
  .imgWrap {
    flex: 1;
    overflow: auto;
    background: #333;
    position: relative;
    cursor: grab;
    &:active {
      cursor: grabbing;
    }
    .imgBox {
      width: max-content;
      position: relative;
      transition: all 0.2s linear;
      .text {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        border: 5px solid #2165ff;
        //border: 5px solid #00BD01;
        border-radius: 4px;
        width: 5px;
        height: 5px;
        cursor: pointer;

        // z-index: -1;
        &.active {
          border-width: 4px;
          background: rgba(0, 0, 255, 0.2);
        }
      }
    }
  }
  .textWrap {
    width: 180px;
    height: 100%;
    position: relative;
    .textList {
      height: 100%;
      overflow-y: auto;
      padding: 10px;
      border-radius: 10px;
      color: #666;
      .scrollBar-0;

      .textItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 13px;
        cursor: pointer;
        height: 45px;
        &.active {
          border-radius: 10px;
          background: #666;
          color: white;
        }
      }
    }
    .tool {
      position: absolute;
      bottom: 30px;
      left: -300px;
      z-index: 999;
      padding: 6px;
      border-radius: 10px;
      width: 250px;
      display: flex;
      align-items: center;
      .stepper {
        flex: 1;
      }
      // .scale {
      // 	font-size: 14px;
      // 	width: 30px;
      // 	text-align: center;
      // }
      // span {
      // 	cursor: pointer;
      // }
    }
  }
}
</style>